<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
    <style type="text/css">
        /* 自定义样式 */
        .form-section {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .form-item {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .form-item label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }
        .form-item .form-control {
            flex: 1;
            display: flex;
            align-items: center;
        }
        .form-item .form-control .form-elem {
            margin-right: 15px;
        }
        .form-item .form-control .action-btns {
            margin-left: 10px;
        }
        .form-item .form-status {
            margin-left: 10px;
            width: 100px;
        }
        .result-section {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 20px;
        }
        .result-content {
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: Consolas, monospace;
            background-color: #fff;
            border: 1px solid #eee;
            padding: 10px;
            max-height: 300px;
            overflow-y: auto;
        }
        /* 验证框相关样式 */
        .validate-container {
            padding: 15px;
            background-color: #f8fafc; /* 淡蓝色背景，提供柔和的表单区域 */
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 轻微阴影，增加层次感 */
            margin-bottom: 20px;
        }

        .form-hint {
            color: #888;
            margin-left: 15px;
            font-size: 12px;
            font-style: italic;
        }

        .validation-buttons {
            margin-top: 20px;
            border-top: 1px dashed #ddd; /* 虚线分隔线，区分按钮区域 */
            padding-top: 15px;
        }

        .validation-result {
            margin-left: 15px;
            font-weight: bold;
            font-size: 14px;
            display: inline-block;
            padding: 5px 0;
        }

        /* 验证错误状态高亮 */
        input.validatebox-invalid {
            border-color: #ff5252 !important; /* 错误边框颜色 */
            background-color: #fff6f6 !important; /* 错误背景色 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
        }

        /* 验证成功状态高亮 */
        input.validatebox-valid {
            border-color: #4caf50 !important; /* 成功边框颜色 */
            background-color: #f6fff6 !important; /* 成功背景色 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
        }
    </style>
</head>
<body>
<div class="easyui-panel" title="EasyUI 输入框取值示例" style="width:800px;padding:20px;">
    <form id="demoForm">
        <div class="form-section">
            <h3>基础文本输入</h3>
            <!-- 标准文本框 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>标准文本框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-textbox" id="standardTextbox" name="standardTextbox" style="width:300px" data-options="value:'测试文本'">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getStandardTextbox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setStandardTextbox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 密码框 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>密码框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-passwordbox" id="passwordbox" name="passwordbox" style="width:300px" data-options="value:'123456'">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getPasswordbox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setPasswordbox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 多行文本框 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>多行文本框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-textbox" id="multilineTextbox" name="multilineTextbox" style="width:300px;height:80px" data-options="multiline:true,value:'多行文本\n测试'">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getMultilineTextbox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setMultilineTextbox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>
        </div>

        <div class="form-section">
            <h3>特殊输入类型</h3>
            <!-- 数字输入框 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>数字输入框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-numberbox" id="numberbox" name="numberbox" style="width:300px" data-options="value:100,min:0,max:1000">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getNumberbox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setNumberbox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 日期输入框 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>日期输入框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-datebox" id="datebox" name="datebox" style="width:300px" data-options="value:'2024-03-20'">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getDatebox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setDatebox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>
        </div>

        <div class="form-section">
            <h3>选择类控件</h3>
            <!-- 组合框 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>组合框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-combobox" id="combobox" name="combobox" style="width:300px" data-options="
                            valueField: 'value',
                            textField: 'text',
                            value: '1',
                            data: [{
                                text: '选项1',
                                value: '1'
                            },{
                                text: '选项2',
                                value: '2'
                            },{
                                text: '选项3',
                                value: '3'
                            }]">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getCombobox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setCombobox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 多选下拉框 (✓表单元素：可通过serializeArray获取，但注意多选时需要特殊处理) -->
            <div class="form-item">
                <label>多选下拉框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-combobox" id="multipleCombobox" name="multipleCombobox" style="width:300px" data-options="
                            valueField: 'value',
                            textField: 'text',
                            multiple: true,
                            value: ['1','2'],
                            data: [{
                                text: '选项1',
                                value: '1'
                            },{
                                text: '选项2',
                                value: '2'
                            },{
                                text: '选项3',
                                value: '3'
                            },{
                                text: '选项4',
                                value: '4'
                            },{
                                text: '选项5',
                                value: '5'
                            }]">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getMultipleCombobox()">获取值</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setMultipleCombobox()">设置值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素（多选值需特殊处理）</span>
                </div>
            </div>

            <!-- 复选框 (✓表单元素：原生checkbox可通过serializeArray获取) -->
            <div class="form-item">
                <label>复选框：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input id="checkbox1" name="checkbox" value="选项A" type="checkbox" checked>
                        <label for="checkbox1">选项A</label>

                        <input id="checkbox2" name="checkbox" value="选项B" type="checkbox">
                        <label for="checkbox2">选项B</label>
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getCheckbox()">获取值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 单选按钮 (✓表单元素：原生radio可通过serializeArray获取) -->
            <div class="form-item">
                <label>单选按钮：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input id="radio1" name="radioOption" value="选项1" type="radio" checked>
                        <label for="radio1">选项1</label>

                        <input id="radio2" name="radioOption" value="选项2" type="radio">
                        <label for="radio2">选项2</label>

                        <input id="radio3" name="radioOption" value="选项3" type="radio">
                        <label for="radio3">选项3</label>
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getRadio()">获取值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>
        </div>

        <div class="form-section">
            <h3>其他控件</h3>
            <!-- 开关按钮 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>开关按钮：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-switchbutton" id="switchbutton" name="switchbutton" data-options="onText:'开启',offText:'关闭',checked:true" style="width:80px">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSwitch()">获取值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 滑块 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>滑块：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input class="easyui-slider" id="slider" name="slider" style="width:300px" data-options="value:50,min:0,max:100,showTip:true">
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSlider()">获取值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>

            <!-- 隐藏域 (✓表单元素：可通过serializeArray获取) -->
            <div class="form-item">
                <label>隐藏域：</label>
                <div class="form-control">
                    <span class="form-elem">
                        <input type="hidden" id="hiddenField" name="hiddenField" value="隐藏值">
                        <span style="color:#888">（值为"隐藏值"）</span>
                    </span>
                    <span class="action-btns">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getHiddenField()">获取值</a>
                    </span>
                </div>
                <div class="form-status">
                    <span style="color:green">✓ 表单元素</span>
                </div>
            </div>
        </div>
    </form>

    <!-- 验证框示例部分 -->
    <div class="form-section">
        <h3>表单验证 (Validatebox)</h3>
        <div style="margin-bottom: 10px;">
            <form id="validateForm" class="easyui-form" method="post">
                <!-- 验证框组 (validatebox) -->
                <div class="validate-container">
                    <!-- 必填验证 -->
                    <div class="form-item">
                        <label>必填字段：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="requiredField" name="requiredField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,missingMessage:'此字段必填',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 必填字段</span>
                        </div>
                    </div>

                    <!-- 邮箱验证 -->
                    <div class="form-item">
                        <label>邮箱验证：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="emailField" name="emailField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'email',invalidMessage:'请输入有效的邮箱地址',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 如：example@domain.com</span>
                        </div>
                    </div>

                    <!-- URL验证 -->
                    <div class="form-item">
                        <label>URL验证：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="urlField" name="urlField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'url',invalidMessage:'请输入有效的URL',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 如：http://www.example.com</span>
                        </div>
                    </div>

                    <!-- 长度验证 -->
                    <div class="form-item">
                        <label>长度验证：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="lengthField" name="lengthField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'length[3,10]',invalidMessage:'长度必须在3-10个字符之间',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 长度限制在3-10个字符</span>
                        </div>
                    </div>

                    <!-- 自定义正则验证 -->
                    <div class="form-item">
                        <label>手机号验证：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="phoneField" name="phoneField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'mobile',invalidMessage:'请输入有效的手机号码',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 中国大陆手机号格式</span>
                        </div>
                    </div>

                    <!-- 数字范围验证 -->
                    <div class="form-item">
                        <label>数字范围：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="rangeField" name="rangeField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'numberRange[1,100]',invalidMessage:'请输入1-100之间的数字',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 数字范围1-100</span>
                        </div>
                    </div>

                    <!-- 相等验证 -->
                    <div class="form-item">
                        <label>密码：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="passwordField" name="passwordField" type="password" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'length[6,20]',invalidMessage:'密码长度必须在6-20个字符之间',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 输入6-20位密码</span>
                        </div>
                    </div>

                    <!-- 密码确认验证 -->
                    <div class="form-item">
                        <label>确认密码：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="confirmPassword" name="confirmPassword" type="password" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'equals[\'#passwordField\']',invalidMessage:'两次密码输入不一致',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 再次输入相同密码</span>
                        </div>
                    </div>

                    <!-- 验证触发方式 -->
                    <div class="form-item">
                        <label>延迟验证：</label>
                        <div class="form-control">
                            <span class="form-elem">
                                <input class="easyui-validatebox" id="delayField" name="delayField" style="width:300px;height:30px;padding:5px;"
                                    data-options="required:true,validType:'email',delay:1000,invalidMessage:'请输入有效的邮箱地址',tipPosition:'right'" value="">
                            </span>
                            <span class="form-hint">* 停止输入1秒后验证</span>
                        </div>
                    </div>

                    <!-- 验证操作按钮 -->
                    <div class="form-item validation-buttons">
                        <label>&nbsp;</label>
                        <div class="form-control">
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="validateFormFields()">验证表单</a>
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetValidationFields()">重置表单</a>
                            <span id="validationResult" class="validation-result"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 表单序列化演示区域 -->
    <div class="result-section">
        <h3>表单序列化演示</h3>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="serializeForm()">序列化表单</a>
        <div id="formResult" class="result-content"></div>
    </div>
</div>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    // 获取标准文本框的值
    function getStandardTextbox() {
        var value = $('#standardTextbox').textbox('getValue');
        alert('标准文本框的值：' + value);
    }

    // 设置标准文本框的值
    function setStandardTextbox() {
        $('#standardTextbox').textbox('setValue', '新设置的文本');
    }

    // 获取密码框的值
    function getPasswordbox() {
        var value = $('#passwordbox').passwordbox('getValue');
        alert('密码框的值：' + value);
    }

    // 设置密码框的值
    function setPasswordbox() {
        $('#passwordbox').passwordbox('setValue', '654321');
    }

    // 获取多行文本框的值
    function getMultilineTextbox() {
        var value = $('#multilineTextbox').textbox('getValue');
        alert('多行文本框的值：' + value);
    }

    // 设置多行文本框的值
    function setMultilineTextbox() {
        $('#multilineTextbox').textbox('setValue', '这是第一行\n这是第二行\n这是第三行');
    }

    // 获取数字输入框的值
    function getNumberbox() {
        var value = $('#numberbox').numberbox('getValue');
        alert('数字输入框的值：' + value);
    }

    // 设置数字输入框的值
    function setNumberbox() {
        $('#numberbox').numberbox('setValue', '888');
    }

    // 获取日期输入框的值
    function getDatebox() {
        var value = $('#datebox').datebox('getValue');
        alert('日期输入框的值：' + value);
    }

    // 设置日期输入框的值
    function setDatebox() {
        $('#datebox').datebox('setValue', '2024-12-31');
    }

    // 获取组合框的值
    function getCombobox() {
        var value = $('#combobox').combobox('getValue');
        var text = $('#combobox').combobox('getText');
        alert('组合框的值：' + value + '\n组合框的文本：' + text);
    }

    // 设置组合框的值
    function setCombobox() {
        $('#combobox').combobox('setValue', '2');
    }

    // 获取多选下拉框的值
    function getMultipleCombobox() {
        var values = $('#multipleCombobox').combobox('getValues');
        var texts = $('#multipleCombobox').combobox('getText');
        alert('多选下拉框的值：' + values.join(',') + '\n多选下拉框的文本：' + texts);
    }

    // 设置多选下拉框的值
    function setMultipleCombobox() {
        $('#multipleCombobox').combobox('setValues', ['3','4','5']);
    }

    // 获取复选框的值
    function getCheckbox() {
        var checkedValues = [];
        $('input[name="checkbox"]:checked').each(function() {
            checkedValues.push($(this).val());
        });
        alert('选中的复选框值：' + checkedValues.join(','));
    }

    // 获取单选按钮的值
    function getRadio() {
        var value = $('input[name="radioOption"]:checked').val();
        alert('单选按钮选中的值：' + value);
    }

    // 获取开关按钮的值
    function getSwitch() {
        var checked = $('#switchbutton').switchbutton('options').checked;
        alert('开关按钮状态：' + (checked ? '开启' : '关闭'));
    }

    // 获取滑块的值
    function getSlider() {
        var value = $('#slider').slider('getValue');
        alert('滑块的值：' + value);
    }

    // 获取隐藏域的值
    function getHiddenField() {
        var value = $('#hiddenField').val();
        alert('隐藏域的值：' + value);
    }

    // 序列化表单
    function serializeForm() {
        // 第一种方式：使用serializeArray获取表单数据（标准方式）
        var formArray = $('#demoForm').serializeArray();
        var formResult = "标准serializeArray结果：\n";
        formResult += JSON.stringify(formArray, null, 2);

        // 第二种方式：获取EasyUI组件的值（更可靠的方式）
        formResult += "\n\n自定义获取EasyUI组件值：\n";
        var customValues = {};

        // 获取各种表单元素的值
        customValues.standardTextbox = $('#standardTextbox').textbox('getValue');
        customValues.passwordbox = $('#passwordbox').passwordbox('getValue');
        customValues.multilineTextbox = $('#multilineTextbox').textbox('getValue');
        customValues.numberbox = $('#numberbox').numberbox('getValue');
        customValues.datebox = $('#datebox').datebox('getValue');
        customValues.combobox = $('#combobox').combobox('getValue');
        customValues.multipleCombobox = $('#multipleCombobox').combobox('getValues');

        // 获取checkbox值（需要特殊处理多选情况）
        customValues.checkbox = [];
        $('input[name="checkbox"]:checked').each(function() {
            customValues.checkbox.push($(this).val());
        });

        customValues.radioOption = $('input[name="radioOption"]:checked').val();
        customValues.switchbutton = $('#switchbutton').switchbutton('options').checked;
        customValues.slider = $('#slider').slider('getValue');
        customValues.hiddenField = $('#hiddenField').val();

        formResult += JSON.stringify(customValues, null, 2);

        // 显示结果
        $('#formResult').html(formResult);
    }

    // 自定义验证规则
    $.extend($.fn.validatebox.defaults.rules, {
        // 手机号码验证
        mobile: {
            validator: function(value, param) {
                return /^1[3-9]\d{9}$/.test(value);
            },
            message: '请输入有效的手机号码'
        },
        // 数字范围验证
        numberRange: {
            validator: function(value, param) {
                var num = parseFloat(value);
                return !isNaN(num) && num >= param[0] && num <= param[1];
            },
            message: '请输入{0}到{1}之间的数字'
        },
        // 相等验证（用于确认密码）
        equals: {
            validator: function(value, param) {
                return value === $(param[0]).val();
            },
            message: '两次输入不一致'
        }
    });

    // 验证整个表单
    function validateFormFields() {
        var isValid = true;
        var fields = [
            '#requiredField',
            '#emailField',
            '#urlField',
            '#lengthField',
            '#phoneField',
            '#rangeField',
            '#passwordField',
            '#confirmPassword',
            '#delayField'
        ];

        // 逐个验证字段
        for (var i = 0; i < fields.length; i++) {
            if (!$(fields[i]).validatebox('isValid')) {
                isValid = false;
                $(fields[i]).validatebox('validate');
            }
        }

        // 显示验证结果
        if (isValid) {
            $('#validationResult').html('表单验证通过！').css('color', 'green');
            // 添加表单通过振动效果
            $('#validateForm').effect('highlight', {color: '#e8f5e9'}, 1000);
        } else {
            $('#validationResult').html('表单验证失败，请检查输入！').css('color', 'red');
            // 添加表单失败振动效果
            $('#validateForm').effect('shake', {times: 2, distance: 5}, 300);
            // 滚动到第一个错误字段
            for (var i = 0; i < fields.length; i++) {
                if (!$(fields[i]).validatebox('isValid')) {
                    $('html, body').animate({
                        scrollTop: $(fields[i]).offset().top - 100
                    }, 500);
                    $(fields[i]).focus();
                    break;
                }
            }
        }
    }

    // 重置验证
    function resetValidationFields() {
        var fields = [
            '#requiredField',
            '#emailField',
            '#urlField',
            '#lengthField',
            '#phoneField',
            '#rangeField',
            '#passwordField',
            '#confirmPassword',
            '#delayField'
        ];

        // 重置所有字段
        for (var i = 0; i < fields.length; i++) {
            $(fields[i]).validatebox('resetValidation').val('');
        }

        // 清空验证结果
        $('#validationResult').html('').css('color', '');
    }

    // 页面加载完成后，添加即时验证效果
    $(function() {
        // 为所有验证框添加焦点和键盘事件
        $('.easyui-validatebox').each(function() {
            var field = $(this);

            // 焦点事件：当获取焦点时突出显示
            field.focus(function() {
                $(this).css({
                    'box-shadow': '0 0 5px rgba(82, 168, 236, 0.5)',
                    'border-color': '#66afe9'
                });
            }).blur(function() {
                $(this).css({
                    'box-shadow': '',
                    'border-color': ''
                });
            });

            // 键盘输入事件：延迟验证
            field.keyup(function() {
                var options = $(this).validatebox('options');
                if (options.delay) {
                    clearTimeout(field.data('timer'));
                    field.data('timer', setTimeout(function() {
                        field.validatebox('validate');
                    }, options.delay));
                }
            });
        });
    });
</script>
</body>
</html>

